<!--
 * @Author: your name
 * @Date: 2022-01-24 23:36:22
 * @LastEditTime: 2022-01-25 18:51:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-ego\vue-ego\src\views\Goods\UploadImg.vue
-->
<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="onSuccess"
      :file-list="fileList"
      :auto-upload="false"
      multiple
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >上传到服务器</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
  </div>
</template>

<script>
import base from '../../api/base'
  export default {
    data() {
      return {
        fileList: [],
        url:base.uploadUrl,
        imgArr:[]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      onSuccess(response, file, fileList){
        // console.log(response, file, fileList);
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
        let imgUrl = base.host + '/' + response.url.slice(7)
        this.imgArr.push(imgUrl)
        this.$emit('sendImg',this.imgArr)
      }
    }
  }
</script>

<style>
</style>
